{extend name="base"}
{block name="style"}
<link rel="stylesheet" href="{:_static()}/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all" />
<link rel="stylesheet" href="{:_static()}/css/main.css" media="all" />

<!-- <script src="{:_static()}/cdn/echarts-en.common.js"></script> -->
<script src="https://cdn.staticfile.org/echarts/4.2.0-rc.1/echarts-en.common.min.js" charset="UTF-8"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.1/c3.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.1/c3.min.js"></script>
<style type="text/css">
    .userinfo-info{padding: 10px 15px; line-height: 20px; font-size: 18px; color: #888; border-bottom: 1px solid #efefef; height: 40px; overflow: hidden;}
</style>
{/block}
{block name="main"}
<div id="app" v-cloak>
   <!--  <el-row class="p_y20">
        
    <el-table
        :default-expand-all="false"
        border
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="ID"
          prop="id"
          :width="80"
          align="center">
        </el-table-column>
        <el-table-column
          label="手机号"
          prop="tel">
        </el-table-column>
        <el-table-column
          label="昵称"
          prop="name">
        </el-table-column>
        <el-table-column
          label="真实姓名"
          align="center">
            <template slot-scope="r">
                <template v-if="r.row.realname">{{r.row.realname}}</template>
                <el-tag type="info" size="mini" v-else>未填写</el-tag>
            </template>
        </el-table-column>
        <el-table-column
          label="支付宝"
          align="center">
            <template slot-scope="r">
                <template v-if="r.row.alipay">{{r.row.alipay}}</template>
                <el-tag type="info" size="mini" v-else>未填写</el-tag>
            </template>
        </el-table-column>
        <el-table-column
          label="邀请人"
          align="center">
            <template slot-scope="r">
                <template v-if="r.row.parent">{{r.row.parent}}</template>
                <el-tag type="info" size="mini" v-else>无</el-tag>
            </template>
        </el-table-column>
        <el-table-column
          label="VIP"
          prop="vip_text"
          sortable
          align="center">
            <template slot-scope="r">
                <el-tag type="danger" size="mini" v-if="r.row.vip_text">{{r.row.vip_text}}</el-tag>
                <el-tag type="info" size="mini" v-else>非VIP</el-tag>
            </template>
        </el-table-column>
        <el-table-column
          label="VIP到期时间"
          align="center"
          prop="vip_expire"
          sortable
          width="140px">
            <template slot-scope="r">
                <template v-if="r.row.vip_expire>0">{{dateFormat(r.row.vip_expire*1000,'Y-m-d H:i')}}</template>
                <el-tag type="info" size="mini" v-else>非VIP</el-tag>
            </template>
        </el-table-column>
        <el-table-column
          label="注册时间"
          align="center"
          width="140px"
          prop="s_time"
          sortable
          :formatter="dateFormats">
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
          prop="status"
          sortable>
            <template slot-scope="status">
                <el-tag type="success" size="mini" v-if="status.row.status">启用</el-tag>
                <el-tag type="info" size="mini" v-else>禁用</el-tag>
            </template>
        </el-table-column>
    </el-table>
    </el-row> -->


    <el-row :gutter="20">
        <el-col :span="12" :offset="6" style="min-width: 500px; border: 1px solid #dfdfdf; border-radius: 15px; margin-top: 35px;">
            <el-col class="userinfo-info userinfo-info-left" :span="8">手机号</el-col>
            <el-col class="userinfo-info userinfo-info-right" :span="16">{$data.tel}</el-col>

            <el-col class="userinfo-info userinfo-info-left" :span="8">昵称</el-col>
            <el-col class="userinfo-info userinfo-info-right" :span="16">{$data.name}</el-col>
            
            <el-col class="userinfo-info userinfo-info-left" :span="8">真实姓名</el-col>
            <el-col class="userinfo-info userinfo-info-right" :span="16">{$data.realName}</el-col>
            
            <el-col class="userinfo-info userinfo-info-left" :span="8">支付宝</el-col>
            <el-col class="userinfo-info userinfo-info-right" :span="16">{$data.alipay}</el-col>
            
            <el-col class="userinfo-info userinfo-info-left" :span="8">邀请人</el-col>
            <el-col class="userinfo-info userinfo-info-right" :span="16">{$data.parent}</el-col>
            
            <el-col class="userinfo-info userinfo-info-left" :span="8">VIP</el-col>
            <el-col class="userinfo-info userinfo-info-right" :span="16">{$data.vip_text}</el-col>
            
            <el-col class="userinfo-info userinfo-info-left" :span="8">VIP到期时间</el-col>
            <el-col class="userinfo-info userinfo-info-right" :span="16">{$data.vip_expire|date="Y-m-d h:i:s"}</el-col>
            
            <el-col class="userinfo-info userinfo-info-left" :span="8">注册时间</el-col>
            <el-col class="userinfo-info userinfo-info-right" :span="16">{$data.s_time}</el-col>
            
            <el-col class="userinfo-info userinfo-info-left" :span="8">状态</el-col>
            <el-col class="userinfo-info userinfo-info-right" :span="16">
                <if codition="$data.status eq '1'">
                <el-tag type="success" size="mini">启用</el-tag>
                <elseif condition="$data.status eq '0'">
                <el-tag type="info" size="mini">禁用</el-tag>
                </if>
            </el-col>

            <el-col class="userinfo-info" :span="24" style="height: auto; text-align: center;">
                <el-button type="success" @click="edit()">修改个人信息</el-button>
                <el-button type="primary" @click="edit2()">修改密码</el-button>
            </el-col>
        </el-col>
    </el-row>

    <!-- 修改用户信息 start -->
    <el-dialog :title="dialogTitle" width="500px" :visible.sync="addVisible">
        <el-form ref="forms" :model="data" :rules="rules" label-width="80px">
            <el-form-item label="手机号码" prop="tel">
                <el-input :value="data.tel" v-if="data.id>0" disabled></el-input>
                <el-input v-model="data.tel" placeholder="手机号码" v-else></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="name">
                <el-input v-model="data.name" placeholder="请输入昵称"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名" prop="realname">
                <el-input v-model="data.realname" placeholder="请输入真实姓名"></el-input>
            </el-form-item>
            <el-form-item label="支付宝" prop="alipay">
                <el-input v-model="data.alipay" placeholder="请输入支付宝"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addVisible = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit('forms','{:url(\'edit\')}')">提 交</el-button>
        </div>
    </el-dialog>
    <!-- 修改用户信息 end -->

    <!-- 修改用户信息 start -->
    <el-dialog :title="dialogTitle2" width="500px" :visible.sync="addVisible2">
        <el-form ref="forms" :model="data" :rules="rules" label-width="80px">
            <el-form-item label="请输入手机号码" prop="tel">
                <!-- <el-input :value="data.tel" v-if="data.id>0" disabled></el-input> -->
                <el-input v-model="data.tel" placeholder="请输入手机号码"></el-input>
            </el-form-item>
            <el-form-item label="获取验证码" prop="code">
                <input style="width: 50%; float: left; margin-bottom: 25px;" class="el-input__inner" type="text" placeholder="验证码" v-model="data.code">
                  <input style="width: 50%; float: right;" type="button" class="el-button el-button--primary" value="获取短信验证码" @click="sms">
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
                <el-input v-model="data.pwd" type="password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="pwd1">
                <el-input v-model="data.pwd1" type="password" placeholder="请输入新密码"></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="pwd2">
                <el-input v-model="data.pwd2" type="password" placeholder="请确认新密码"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addVisible = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit('forms','{:url(\'editlogin\')}')">提 交</el-button>
        </div>
    </el-dialog>
    <!-- 修改用户信息 end -->
</div>



{/block}
{block name="vue"}
<script>
var app=new Vue({
  el:'#app',
    mixins:[wsMixins],
    data:{
        addVisible:false,
        addVisible2:false,
        dialogTitle:'修改个人信息',
        dialogTitle2:'修改密码',
        tableData:{$userinfo|raw},
        data:{
                // tel:'',
                pwd:'',
                pwd1:'',
                pwd2:'',
                code:'',
                // remark:'',
                // status:1,
                // is_agent:0,
        },
        rules:{
            tel:[
                {required: true, message:'请输入手机号码'},
            ],
            name:[
                {required: true, message:'请输入昵称'},
            ],
            code:[
                {required: true, message:'请输入短信验证码'},
            ],
            pwd1:[
                {required: true, message:'请输入新密码'},
            ],
            pwd2:[
                {required: true, message:'请确认新密码'},
            ],
        },
    },
    created(){
        this.emptyData();
    },
    methods:{
        showDialog(isShow=true){
            this.addVisible=isShow;
        },
        showDialog2(isShow=true){
            this.addVisible2=isShow;
        },
        emptyData(newData={}){
            this.data=Object.assign({
                tel:'',
                name:'',
                alipay:'',
                realname:'',
                remark:'',
                // status:1,
                // is_agent:0,
            },newData);
        },
        emptyData2(newData={}){
            this.data=Object.assign({
                tel:'',
                pwd:'',
                pwd1:'',
                pwd2:'',
                code:'',
                // remark:'',
                // status:1,
                // is_agent:0,
            },newData);
        },
        // this.showCharts();
        edit(){
            // this.dialogTitle='修改用户';
            this.emptyData(this.tableData);
            this.showDialog();
        },
        edit2(){
            // this.dialogTitle='修改用户';
            this.emptyData2(null);
            this.showDialog2();
        },
        sms(){
            // $(this).attr("disabled",true);
            // console.log($(this));
            // return;
            // console.log(this.data.tel.length);
            // return;
            if(!this.data.tel.length){
                this.message='请输入手机号码';
                this.$message({
                    message:this.message,
                    type:'warning'
                })
                return;
            }
            this.message='';
            $.post("{:url('sendCode')}",{tel:this.data.tel},res=>{

                if(res&&typeof res==='string'){
                    res=JSON.parse(res);
                }
                console.log(res)
                if(res.code){
                    this.$message({
                        message:res.msg,
                        type:'success'
                    })
                    // setTimeout(function(){
                    //     location.href=res.url;
                    // },1500);
                }else if(res.msg){
                    this.$message({
                        message:res.msg,
                        type:'warning'
                    })
                }
            },'json');
        },
        login(){

            if(!this.data.tel.length){
                this.message='请输入手机号码';
                this.$message({
                    message:this.message,
                    type:'warning'
                })
                return;
            }
            if(!this.data.smsCode.length){
                this.message='短信验证码不能为空';
                this.$message({
                    message:this.message,
                    type:'warning'
                })
                return;
            }
            this.message='';
            $.post("{:url('')}",this.data,res=>{
                alert(res);
                if(res&&typeof res==='string'){
                    res=JSON.parse(res);
                }
                console.log(res);
                if(res.status == 0){
                    this.$message({
                        message:res.msg,
                        type:'success'
                    })
                    setTimeout(function(){
                        location.href=res.url;
                    },1500);
                }else if(res.msg){
                    this.$message({
                        message:res.msg,
                        type:'warning'
                    })
                }
            },'json');
        },
    },
});

</script>
{/block}